<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" href="../../styles/password.css">
</head>
<body>
<div class="password" id="change-app">
    <div class="password-form" style="width: 100%">
        <el-form ref="form" :model="form" :rules="changeRules">
            <el-form-item label="原密码:" prop="adminOldPassword">
                <el-input v-model="form.adminOldPassword" type="password" placeholder="旧密码"
                          prefix-icon="iconfont icon-lock" maxlength="12"
                ></el-input>
            </el-form-item>
            <el-form-item label="新密码:" prop="adminNewPassword">
                <el-input v-model="form.adminNewPassword" type="password" placeholder="新密码(由6~12位数字或字母组成)"
                          prefix-icon="iconfont icon-lock" maxlength="12"
                ></el-input>
            </el-form-item>
            <el-form-item label="请再次输入新密码:" prop="adminNewPasswordAgain">
                <el-input v-model="form.adminNewPasswordAgain" type="password" placeholder="请再次输入新密码"
                          prefix-icon="iconfont icon-lock" maxlength="12"
                          @keyup.enter.native="changePassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changePassword">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>


<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el: "#change-app",
        data() {
            return {
                //页面信息
                userInfo: {},
                //表单信息
                form: {
                    adminOldPassword: '',
                    adminNewPassword: '',
                    adminNewPasswordAgain: '',
                }
            }
        },
        mounted() {
            //保存用户数据到当前页面
            const userInfo = window.localStorage.getItem('userInfo')
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
        },
        computed: {
            changeRules() {
                const validateAdminOldPassword = (rule, value, callback) => {
                    // 字母或数字的正则表达式匹配
                    let match = value.match(/^[0-9A-Za-z]{6,24}$/)
                    if (value.length < 6) {
                        callback(new Error('密码必须在6位以上'))
                    } else if (value !== this.userInfo.adminPassword) {
                        callback(new Error('与原密码不符'))
                    } else if (value.length > 12) {
                        callback(new Error('密码不能超12位'))
                    } else if (!match) {
                        callback(new Error('密码必须由数字或字母组成'))
                    } else {
                        callback()
                    }
                    this.adminOldPassword = value;
                }
                const validateAdminNewPassword = (rule, value, callback) => {
                    // 字母或数字的正则表达式匹配
                    let match = value.match(/^[0-9A-Za-z]{6,24}$/)
                    if (value.length < 6) {
                        callback(new Error('密码必须在6位以上'))
                    } else if (value === this.adminOldPassword) {
                        callback(new Error('新密码不能与旧密码一致'))
                    } else if (value.length > 12) {
                        callback(new Error('密码不能超12位'))
                    } else if (!match) {
                        callback(new Error('密码必须由数字或字母组成'))
                    } else {
                        callback()
                    }
                    this.adminNewPassword = value;
                }
                const validateAdminNewPasswordAgain = (rule, value, callback) => {
                    // 字母或数字的正则表达式匹配
                    let match = value.match(/^[0-9A-Za-z]{6,24}$/)
                    if (value !== this.adminNewPassword) {
                        callback(new Error('与新密码不一致'))
                    } else if (value.length > 12) {
                        callback(new Error('密码不能超12位'))
                    } else if (!match) {
                        callback(new Error('密码必须由数字或字母组成'))
                    } else {
                        this.userInfo.adminPassword = value;
                        callback()
                    }
                }
                return {
                    'adminOldPassword': [{'validator': validateAdminOldPassword, 'trigger': 'blur'}],
                    'adminNewPassword': [{'validator': validateAdminNewPassword, 'trigger': 'blur'}],
                    'adminNewPasswordAgain': [{'validator': validateAdminNewPasswordAgain, 'trigger': 'blur'}]
                }
            }
        },
        methods: {
            //修改密码函数
            changePassword() {
                axios({
                    method: "put",
                    url: "/admin/password/" + this.userInfo.id,
                    data: this.userInfo
                }).then(resp => {
                    if (resp.data) {
                        this.$message({
                            message: '修改成功！',
                            type: 'success',
                        });
                    } else {
                        this.$message({
                            message: '数据异常，请检查数据再提交！',
                            type: 'warning'
                        });
                    }
                })
                this.form = {};
            }
        }
    })
</script>

</body>
</html>